<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入ElementUI样式 -->
    <link type="text/css" rel="stylesheet" href="./css/index.css">
    <!-- 引入Vue组件库 -->
    <script type="text/javascript" src="./js/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script type="text/javascript" src="./js/index.js"></script>
    <script type="text/javascript" src="./js/axios.min.js"></script>
</head>
<body>
<div id="app">

    <el-row :gutter="20">
    <el-form ref="form" :model="form" label-width="100px" :rules="rules">
        <el-col :span="6" :offset="1">
            <div class="grid-content bg-purple">
                <el-form-item>
                    <div id="upload">
                        <el-upload
                                class="avatar-uploader"
                                action="upload/sure"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                </el-form-item>

                <div>
                    <el-alert
                            title="上传照片为一寸证件照！！！！"
                            type="warning"
                            center
                            show-icon>
                    </el-alert>
                </div>

            </div>
        </el-col>
        <el-col :span="10" :offset="3">
            <div class="grid-content bg-purple">
                <el-form-item label="账号" prop="account">
                    <el-input v-model="form.account" :disabled="true" placeholder="创建员工账号为自动递增"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password" >
                    <el-input v-model="form.password" :disabled="true" placeholder="创建员工初始密码为123456"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="科室">
                    <div class="block">
                        <el-cascader
                                v-model="value"
                                :options="options"
                                :show-all-levels="false"
                                placeholder="快速搜索：指南"
                                filterable
                                clearable
                                @change="handleChange"></el-cascader>
                    </div>
                </el-form-item>

                <el-form-item label="身份证号" prop="idCard">
                    <el-input v-model="form.idCard" placeholder="填入正确的身份证号"></el-input>
                </el-form-item>
                <el-form-item label="就职状态">
                    <el-switch v-model="form.status"
                               active-value="0"
                               inactive-value="1"></el-switch>
                </el-form-item>
                <el-form-item label="学历学位" prop="education">
                    <el-select v-model="form.education" placeholder="请选择学历">
                        <el-option v-for="edu in EduData" :label="edu.education" :value="edu.education"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="专业" prop="major">
                    <el-input v-model="form.major"></el-input>
                </el-form-item>
                <el-form-item label="详细信息" prop="introduction">
                    <el-input type="textarea" v-model="form.introduction"></el-input>
                </el-form-item>
                <el-form-item label="个人经历" prop="prize">
                    <el-input type="textarea" v-model="form.prize" placeholder="在校任职，获奖经历等"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </div>
        </el-col>
    </el-form>
</el-row>

</div>

<script>
    new Vue({
        el: "#app",
        data() {
            let validatorIdCard = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入身份证号'));
                } else if (value && (!(/\d{17}[\d|x]|\d{15}/).test(value) || (value.length !== 15 && value.length !== 18))) {
                    callback(new Error('身份证号码不符合规范'));
                } else {
                    callback();
                }
            };
            let validatorPhone = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入电话号'));
                } else if (value && (!(/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/).test(value))) {
                    callback(new Error('电话号码不符合规范'));
                } else {
                    callback();
                }
            };
            return  {
                EduData:[], //学历信息
                form:{},    //添加的双向绑定数据表单
                value: [],  //联级查询获取的多级id--value
                options: [],//联级数据
                imageUrl:'',
                timer: null,
                rules: {
                    idCard: [
                        { validator: validatorIdCard, trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '请输入员工姓名', trigger: 'blur' },
                        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                    ],

                    phone: [
                        { validator: validatorPhone, trigger: 'blur' }
                    ],
                    major:[{ required: true, message: '专业不能为空', trigger: 'blur' }],
                    prize:[{ required: true, message: '个人经历不能为空', trigger: 'blur' },],
                    introduction:[{ required: true, message: '详细信息不能为空', trigger: 'blur' },],

                }
            }
        },
        created() {
            this.initEdu();
            this.initTable();
        },
        methods: {
            //添加提交按钮
            onSubmit(){
                this.form.hardUrl = this.imageUrl;
                this.form.password = 123456;
                axios.post("/admin/toInsert",this.form).then(resp=>{
                    if(resp.data.code === 200){
                        this.$message({
                            showClose: true,
                            message: '添加成功',
                            type: 'success'
                        });
                        clearTimeout(this.timer); //清除延迟执行

                        this.timer = setTimeout(()=>{  //设置延迟执行
                            location.href="/adminList.html"
                        },1000);
                    }else {
                        this.$message({
                            showClose: true,
                            message: '添加失败',
                            type: 'warning'
                        });
                    }
                })
            },

            //初始化科室
            initTable(){
                axios.post("/dept/CascaderList").then(resp=>{
                    this.options=resp.data.data;
                });
            },

            //初始化学历
            initEdu(){
                axios.get("/edu/list").then(resp=>{
                    this.EduData = resp.data.data;
                })
            },

            handleChange(value) {
                this.form.sid = value[1];
            },

            //上传头像
            handleAvatarSuccess(res, file) {
                this.imageUrl = res.data;
                console.log(res.data);
            },

            //上传头像的限制条件
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
        },
    })
</script>

<style>
    #upload{
        margin: 50px 50px;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 200px;
        line-height: 200px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 200px;
        display: block;
    }
</style>

</body>
</html>